<template>
  <nav>
    <!-- 弹出的label -->
    <v-snackbar v-model="snackbar" :timeout="4000" top color="success">
      Success!
      <v-btn flat color="white" @click.native="snackbar = false">×</v-btn>
    </v-snackbar>
    <!-- head bar -->
    <v-toolbar flat app>
      <v-toolbar-side-icon class="grep--text" @click="drawer=!drawer"></v-toolbar-side-icon>
      <v-toolbar-title class="grep--text text-uppercase">
        <span class="font-weight-light">shuo</span>
        <span>GG</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- 下拉列表 -->
      <v-menu offset-y>
        <v-btn flat color="grey" dark slot="activator">
          <v-icon left>expand_more</v-icon>
          <span>Menu</span>
        </v-btn>
        <v-list>
          <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-tile-title>{{ link.text }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
      <v-btn flat>
        <span>Sign out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

    <!-- 抽屉 -->
    <v-navigation-drawer app v-model="drawer" class="cyan">
      <v-layout column align-center>
        <v-flex class="mt-5">
          <v-avatar size="100">
            <img src="/5.jpg">
          </v-avatar>
          <p class="white--text subheading mt-1 text-md-center">shuoGG</p>
        </v-flex>
        <v-flex class="mt-4 mb-3">
          <Popup @projectAdded="snackbar = true"/>
        </v-flex>
      </v-layout>
      <v-list>
        <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
          <v-list-tile-action>
            <v-icon class="white--text">{{link.icon}}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title class="white--text">{{link.text}}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
  </nav>
</template>


<script>
import Popup from "./Popup";

export default {
  components: {
    Popup
  },
  data() {
    return {
      drawer: false,
      links: [
        { icon: "dashboard", text: "Dashboard", route: "/" },
        { icon: "folder", text: "My Projects", route: "/projects" },
        { icon: "person", text: "Team", route: "/team" }
      ],
      snackbar: false
    };
  }
};
</script>


